Estoy creando una aplicación de creación de equipos de Pokémon. Quiero hacer clic en un botón (que muestra una imagen de Pokémon para saber quién es) y que los datos de un diccionario (imagen, nombre, movimientos, habilidad, etc.) se muestren en el div superior debajo de la clase "monstruo" ( reemplazando la imagen del huevo). Simplemente no estoy seguro de por dónde empezar.

html

 <h2>Current Team</h2> <div id="your-team" class="team"> <div class="slot"> <div class="monster"> <img src="egg.png" alt=""> </div> <div class="info"> <p>test</p> </div> </div> <h2>All Pokemon</h2> <div class="your-options" id="options"> <div class="all-monsters" id="all"> <ol class="list-pokemon"> <li> <button> <img src="treecko.png" alt=""> </button> </li> <li> <button> <img src="grovyle.png" alt=""> </button> </li> <li> <button> <img src="sceptile.png" alt=""> </button> </li> </ol> </div> </div>

diccionario (almacenado en un archivo de texto separado)

 let pokemon = { 252: { "name": "Treecko", "type": "Grass", "ability": "Overgrow", "height": "1'08''", "weight": "11.0lbs", "location": "Starter Pokemon", "moves": { "Level --": "Pound", "Level --": "Leer", "Level 6": "Absorb", "Level 11": "Quick Attack", "Level 16": "Pursuit", "Level 21": "Screech", "Level 26": "Mega Drain", "Level 31": "Agility", "Level 36": "Slam", "Level 41": "Detect", "Level 46": "Giga Drain", "Level 50": "Energy Ball" }, }, }